<template>
    <div>
        <header-footer :commonData="{$parent:$parent}">
            <div class="crumb home_width">
                <ul>
                    <li class="color666 f_left">当前位置：</li>
                    <li>
                        <router-link class="color666 f_left" to="/home">首页></router-link>
                    </li>
                    <li class="color666 f_left">培训报名</li>
                </ul>
            </div>
            <div class="examApply">
                <div class="examApplyL f_left">
                    <div class="examApplyL1">
                        <a @click="slryApply">
                            <p class="examApplyL1p">三类人员培训报名</p>
                            <!-- <span class="examApplyL1text1">点击快速报名</span> -->
                        </a>
                    </div>
                    <div class="examApplyL1">
                        <a @click="tzgApply">
                            <p class="examApplyL1p">特种作业人员培训报名</p>
                            <!-- <span class="examApplyL1text1">点击快速报名</span> -->
                        </a>
                    </div>
                    <div class="examApplyL1">
                        <a @click="toStudy">
                            <p class="examApplyL1p">考前学习</p>
                            <!-- <span class="examApplyL1text1">点击快速报名</span> -->
                        </a>
                    </div>
                </div>
                <div class="examApplyR f_right">
                    <!-- <img :src="examApplyImg" :class="examApplyImgClass?'examApplyImgSlry':'examApplyImgTzg'"> -->
                    <img :src="examApplyImg" class="examApplyImgSlry">
                </div>
                <div class="clear"></div>
            </div>
        </header-footer>
        <div v-if="configTrain.tzgTips!=undefined">
            <el-dialog :visible.sync="showTips" title="重要通知" center :close-on-click-modal="false" style="">
                <div style="font-size: 17px;line-height: 30px;">
                    <p>各注册企业、个人：</p>
                    <p style="padding-left: 30px;" v-html="configTrain.tzgTips">
                        <!-- <p style="padding-left: 30px;"> -->
                        <!-- 本栏目为考前培训报名，请各学员先参加“考试报名”，并确保报名成功，再参加“培训报名”。培训结束后，我单位概不接受退费申请及其他信息修改诉求。考前培训为自愿报名，且仅作为考生在考前的强化学习和对考场（特种工）的熟悉，请学员切勿视其为“培训即包过”，望理解！预祝各位学员取得好成绩！ -->
                    </p>
                </div>
                <span slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="showTips = false">我知道了</el-button>
                </span>
            </el-dialog>
        </div>
    </div>
</template>

<script>
    import headerFooter from '../../../components/cont_education/header_and_footer.vue'
    var _this;
    export default {
        data() {
            return {
                showTips: true,
                getProjects: [],
                examApplyImg: "/static/img/home/exam_apply_slry.png",
                examApplyImgClass: true,
                configTrain: {}
            }
        },
        beforeCreate() {
            _this = this;
        },
        mounted: function() {
            var that = this;
            this.common.post(this.api.getProjects, {}, function(res) {
                that.getProjects = res.resultMap;
            });
            this.getConfig();
        },
        methods: {
            getConfig: function() {
                this.common.post(this.api.getConfig, {
                    configKey: "ConfigTrain"
                }, function(res) {
                    if (String.isEmptyOrNUll(res.resultMap)) return;
                    _this.common.urlToJson(res.resultMap, function(response) {
                        _this.configTrain = response;
                        _this.showTips = !String.isEmptyOrNUll(_this.configTrain.tzgTips) ? true :
                            false;
                        _this.$cookies.set("tzgApplyTrainDescriptFee",_this.configTrain.tzgApplyTrainDescriptFee);
                        _this.$cookies.set("slryApplyTrainDescriptFee",_this.configTrain.slryApplyTrainDescriptFee);
                    });
                    
                    
                    // window.fetch(res.resultMap).then(response => response.text()).then(response => {
                    //     _this.configTrain = JSON.parse(response);
                    //     _this.showTips = !String.isEmptyOrNUll(_this.configTrain.tzgTips) ? true :
                    //         false;
                    //     _this.$cookies.set("tzgApplyTrainDescriptFee",_this.configTrain.tzgApplyTrainDescriptFee);
                    //     _this.$cookies.set("slryApplyTrainDescriptFee",_this.configTrain.slryApplyTrainDescriptFee);
                    // });
                });
            },
            toStudy: function() {
                var that = this;
                // if (!String.isEmptyOrNUll(this.loginInfo.token)) {
                window.open('/home/play/trainTask/0/0/0/0');
                // } else {
                //     this.common.toPage("/login");
                // }
            },
            slryApply: function() {
                if (parseInt(this.api.config.slryApplyClose) == 1) {
                    this.$message.error("三类人员报名入口已关闭！");
                    return;
                }
                window.location.href = "/home/apply/apply_common_nopay/slrybm";
            },
            tzgApply: function() {
                if (parseInt(this.api.config.slryApplyClose) == 1) {
                    this.$message.error("特种作业人员报名入口已关闭！");
                    return;
                }
                window.location.href = "/home/apply/apply_common_nopay/tzgbm";
            },
            mouseenter: function(str) {
                if (str == "tzgbm") {
                    this.examApplyImg = "/static/img/home/exam_apply_tzg.png";
                    this.examApplyImgClass = false;
                } else if (str == "slrybm") {
                    this.examApplyImg = "/static/img/home/exam_apply_slry.png";
                    this.examApplyImgClass = true;
                }
            }
        },
        components: {
            headerFooter
        }
    }
</script>

<style>

</style>
